<template>
	<view class="page-design-edit" :class="{'min-page': isMinPage}" :style="{height: pageHeight+'px'}">
		<view class="left-warp">
			<view class="btn-back uni-icons-back" @click="doBack"></view>
			<view class="comp" :class="{'active': comp.type == designType.img}" @click="addComp(designType.img)">图片</view>
			<view class="comp" :class="{'active': comp.type == designType.swiper}" @click="addComp(designType.swiper)">轮播</view>
			<view class="comp" :class="{'active': comp.type == designType.line}" @click="addComp(designType.line)">间隔</view>
			<view class="comp" :class="{'active': comp.type == designType.video}" @click="addComp(designType.video)">视频</view>
			<view class="comp" :class="{'active': comp.type == designType.layer}" @click="addComp(designType.layer)">浮层</view>
			<view class="comp-layers">
				<view class="comp-layer" v-for="layer in layerComps" :key="layer._id" :class="{'active': layer._id == comp._id}" @click="changeComp(layer)">浮层{{(layer._id+'').substr(8)}}</view>
			</view>
		</view>
		<view class="center-warp">
			 <view class="phone">
				 <view class="phone-top"></view>
				<view class="phone-content" :style="{width: res.base_width+'px', height: phoneHeight+'px'}">
					<image class="phone-status" src="https://www.mescroll.com/img/phone-status.png" mode="widthFix"></image>
					<!-- 装修效果预览 -->
					<me-design v-model="comp" :res="res" @edit="editComp" @change="tabIndex=1"></me-design>
				</view>
				<view class="phone-bottom"></view>
			 </view>
		</view>
		<view class="right-warp">
			<view class="tabs-warp">
				<me-tabs v-model="tabIndex" :tabs="tabs"></me-tabs>
			</view>
			<view class="set-warp">
				<!-- 页面设置 -->
				<view v-if="tabIndex==0" class="set-page">
					<view class="item-warp">
						<view class="label">页面的标题: </view>
						<input v-model.trim="res.title" class="input item-flex" placeholder="请输入页面标题说明"/>
					</view>
					<view class="item-warp">
						<view class="label">页面的别名: </view>
						<input v-model.trim="res.name" class="input item-flex" placeholder="别名 (APP可根据别名查询详情,可选)"/>
					</view>
					<view class="item-warp">
						<view class="label">适应状态栏:</view>
						<me-radio v-model="res.bar_auto" :list="singleRadio"></me-radio>
					</view>
					<view class="item-warp" v-if="res.bar_auto">
						<view class="label">状态栏背景:</view>
						<input v-model.trim="res.bar_bg" class="input item-flex" placeholder="请输入色值 (可选,默认透明)"/>
					</view>
					<view class="item-warp">
						<view class="label">显示返回键:</view>
						<me-radio v-model="res.show_back" :list="singleRadio" @change="showBack"></me-radio>
					</view>
					<view class="item-warp">
						<view class="label">返回键图标:</view>
						<input v-model.trim="res.btn_back" class="input item-flex" placeholder="页面的返回键"/>
						<me-upload v-model="res.btn_back" :preview="false"></me-upload>
					</view>
				</view>
				
				<!-- 组件设置 -->
				<view v-if="tabIndex==1" class="set-comp">
					
					<view class="comp-empty" v-if="!comp.type">请在左侧选择或添加要编辑的组件</view>
					
					<!-- 图片 -->
					<view class="comp-img" v-if="comp.type==designType.img">
						<view class="item-warp">
							<view class="label">图片地址: </view>
							<input v-model.trim="comp.src" class="input item-flex" placeholder="请输入或上传图片地址"/>
							<me-upload v-model="comp.src"></me-upload>
						</view>
						<me-input-url v-model="comp.url" :switch-tab.sync="comp.switchTab"></me-input-url>
						<view class="add-area" v-if="comp.src" @click="addArea(comp)"> <text class="uni-icons-plusempty"></text> <text>添加热区</text> </view>
						<template v-if="comp.areas">
							<me-input-url v-for="(area,a) in comp.areas" :key="area._id" v-model="area.url" :label="getInputUrlLabel(a)" :switch-tab.sync="area.switchTab"></me-input-url>
						</template>
					</view>
					
					<!-- 轮播 -->
					<view class="comp-swiper" v-if="comp.type==designType.swiper">
						<view class="sw-item" v-for="(val, s) in comp.list" :key="val._id">
							<view class="item-warp">
								<view class="label">图片地址: </view>
								<input v-model.trim="val.src" class="input item-flex" placeholder="请输入或上传图片地址"/>
								<me-upload v-model="val.src"></me-upload>
							</view>
							<me-input-url v-model="val.url" :switch-tab.sync="val.switchTab"></me-input-url>
							<view class="eidt-swiper">
								<view class="btn-icon uni-icons-plusempty" @click="editSwiper('add', val, comp.list)"></view>
								<template v-if="s>0">
									<view class="btn-icon uni-icons-closeempty" @click="editSwiper('del', val, comp.list)"></view>
									<view class="btn-icon uni-icons-arrowthinup" @click="editSwiper('up', val, comp.list)"></view>
									<view class="btn-icon uni-icons-arrowthindown" @click="editSwiper('down', val, comp.list)"></view>
								</template>
							</view>
						</view>
						<view class="item-warp">
							<view class="label">是否自动轮播:</view>
							<me-radio v-model="comp.autoplay" :list="singleRadio"></me-radio>
						</view>
						<view class="item-warp">
							<view class="label">是否衔接滑动:</view>
							<me-radio v-model="comp.circular" :list="singleRadio"></me-radio>
						</view>
						<view class="item-warp">
							<view class="label">是否有小圆点:</view>
							<me-radio v-model="comp.dot_show" :list="singleRadio"></me-radio>
						</view>
						<view class="item-warp">
							<view class="label">小圆点选中时的色值: </view>
							<input v-model.trim="comp.dot_color_act" class="input item-flex" placeholder="请输入色值"/>
						</view>
						<view class="item-warp">
							<view class="label">小圆点未选中的色值: </view>
							<input v-model.trim="comp.dot_color" class="input item-flex" placeholder="请输入色值"/>
						</view>
						<view class="item-warp">
							<view class="label">轮播图边距: </view>
							<input v-model.number="comp.margin" class="input item-flex" placeholder="请输入数值,单位默认rpx"/>
						</view>
						<view class="item-warp">
							<view class="label">轮播图间隔: </view>
							<input v-model.number="comp.space" class="input item-flex" placeholder="请输入数值,单位默认rpx"/>
						</view>
						<view class="item-warp">
							<view class="label">轮播图圆角: </view>
							<input v-model.number="comp.radius" class="input item-flex" placeholder="请输入数值,单位默认rpx"/>
						</view>
						<view class="item-warp">
							<view class="label">轮播背景图: </view>
							<input v-model.trim="comp.bg" class="input item-flex" placeholder="请输入或上传图片地址"/>
							<me-upload v-model="comp.bg"></me-upload>
						</view>
					</view>
					
					<!-- 间隔 -->
					<view v-if="comp.type==designType.line">
						<view class="item-warp">
							<view class="label">间隔高度: </view>
							<input v-model.number="comp.height" class="input item-flex" placeholder="请输入数字, 单位默认rpx"/>
						</view>
						<view class="item-warp">
							<view class="label">间隔背景: </view>
							<input v-model.trim="comp.bg" class="input item-flex" placeholder="请输入色值"/>
						</view>
					</view>
					
					<!-- 视频 -->
					<view v-if="comp.type==designType.video">
						<view class="item-warp">
							<view class="label">视频地址: </view>
							<input v-model.trim="comp.src" class="input item-flex" placeholder="请输入或上传视频地址"/>
							<me-upload v-model="comp.src"></me-upload>
						</view>
						<view class="item-warp">
							<view class="label">视频封面: </view>
							<input v-model.trim="comp.poster" class="input item-flex" placeholder="请输入或上传视频封面"/>
							<me-upload v-model="comp.poster"></me-upload>
						</view>
						<view class="item-warp">
							<view class="label">视频高度: </view>
							<input v-model.number="comp.height" class="input item-flex" placeholder="请输入数值,单位默认rpx"/>
						</view>
					</view>
					
					<!-- 浮层 -->
					<view v-if="comp.type==designType.layer">
						<view class="item-warp">
							<view class="label">浮层图片: </view>
							<input v-model.trim="comp.src" class="input item-flex" placeholder="请输入或上传图片地址"/>
							<me-upload v-model="comp.src"></me-upload>
						</view>
						<me-input-url v-model="comp.url" :switch-tab.sync="comp.switchTab"></me-input-url>
						<view class="item-warp" v-if="comp.src">
							<view class="add-area" @click="addArea(comp)"> <text class="uni-icons-plusempty"></text> <text>添加热区</text> </view>
							<view class="add-area" @click="addArea(comp, true)"> <text class="uni-icons-plusempty"></text> <text>关闭按钮</text> </view>
						</view>
						<template v-if="comp.areas">
							<view v-for="(area,a) in comp.areas" :key="area._id">
								<template v-if="area.close">
									<view class="item-warp">
										<view class="label color-primary">热区{{a+1}}为关闭按钮</view>
									</view>
								</template>
								<template v-else>
									<me-input-url v-model="area.url" :label="getInputUrlLabel(a)" :switch-tab.sync="area.switchTab"></me-input-url>
								</template>
							</view>
						</template>
						<view class="item-warp">
							<view class="label">浮层宽度: </view>
							<input v-model.trim="comp.width" class="input item-flex" placeholder="支持百分比和数字, 数字默认单位rpx"/>
						</view>
						<view class="item-warp">
							<view class="label">是否居中: </view>
							<me-radio v-model="comp.center" :list="singleRadio"></me-radio>
						</view>
						<view class="item-warp">
							<view class="label">距离顶部: </view>
							<input v-model.trim="comp.top" class="input item-flex" placeholder="支持百分比和数字, 数字默认单位rpx"/>
						</view>
						<view class="item-warp">
							<view class="label">距离左边: </view>
							<input v-model.trim="comp.left" class="input item-flex" placeholder="支持百分比和数字, 数字默认单位rpx"/>
						</view>
						<view class="item-warp">
							<view class="label">距离右边: </view>
							<input v-model.trim="comp.right" class="input item-flex" placeholder="支持百分比和数字, 数字默认单位rpx"/>
						</view>
						<view class="item-warp">
							<view class="label">距离下边: </view>
							<input v-model.trim="comp.bottom" class="input item-flex" placeholder="支持百分比和数字, 数字默认单位rpx"/>
						</view>
						<view class="item-warp">
							<view class="label">层级关系: </view>
							<input v-model.trim="comp.zIndex" class="input item-flex" placeholder="请输入数值,层级越高越在上面"/>
						</view>
						<view class="item-warp">
							<view class="label">显示遮罩: </view>
							<me-radio v-model="comp.shadow" :list="singleRadio"></me-radio>
						</view>
						<view class="item-warp">
							<view class="label">显示一次: </view>
							<me-radio v-model="comp.show_once" :list="singleRadio"></me-radio>
						</view>
					</view>
				</view>
			</view>
			<view class="submit-warp">
				<button class="btn" @click="submit" type="primary">保存</button>
				<button class="btn" @click="del" type="warn">删除</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {apiDesignAdd, apiDesignEdit, apiDesignDetail, apiDesignDel} from '../../api/design.js';
	import designType from '../../common/design-type.js';
	import {showToast} from '../../common/util.js';
	export default {
		data() {
			return {
				pageHeight: 800,
				tabs: ['页面设置', '组件设置'],
				tabIndex: 0,
				designType, // 组件类型
				res: { // 组件数据
					title: "",
					bar_auto: false,
					bar_bg: "",
					show_back: true,
					btn_back: "https://www.mescroll.com/img/btn-back.png",
					comps:[],
					base_width: 375 // 预览屏幕宽度
				},
				comp: {}, // 当前装修的组件
				singleRadio:[
					{value: "是", label: true},
					{value: "否", label: false}
				]
			}
		},
		computed: {
			isMinPage(){
				return this.pageHeight < 800
			},
			phoneHeight(){
				return this.isMinPage ? this.pageHeight - 60 : this.pageHeight - 200
			},
			isEdit() {
				return this.res._id // 是否编辑模式
			},
			pageTitle(){ // 标题
				return this.isEdit ? "装修页详情" : "添加装修页"
			},
			compIndex(){ // 当前操作的组件下标
				return this.res.comps.findIndex(val => val._id == this.comp._id)
			},
			layerComps(){
				return this.res.comps.filter(val => val.type == this.designType.layer)
			}
		},
		onLoad(option) {
			let sys = uni.getSystemInfoSync()
			this.pageHeight = sys.windowHeight - 30
			let _id = option._id
			if(_id){
				// 传入id,则显示详情,可编辑和删除
				this.$set(this.res, "_id", _id)
				// 查询详情
				apiDesignDetail({_id}).then(res=>{
					if(!res.base_width) res.base_width = this.res.base_width
					this.res = res
				})
			}
		},
		methods: {
			// 是否显示返回键
			showBack(){
				if(this.res.show_back && !this.res.btn_back) this.res.btn_back = DESIGN_PAGE_CLOSE
			},
			// 添加组件
			addComp(type){
				let comp = {_id:Date.now(), type}
				if(type == this.designType.swiper){
					comp.autoplay = true
					comp.circular = false
					comp.dot_show = true
					comp.dot_color = "rgba(0, 0, 0, .3)"
					comp.dot_color_act = "#000000"
					comp.margin = 0
					comp.space = 0
					comp.radius = 0
					comp.bg = ""
					comp.list = [{_id: Date.now()}]
				}else if(type == this.designType.line){
					comp.height = 40
					comp.bg = "#eee"
				}else if(type == this.designType.video){
					comp.height = 400
				}else if(type == this.designType.layer){
					comp.zIndex = 600
					comp.center = true
					comp.width = "70%"
					comp.top = "50%"
					comp.left = "50%"
					comp.right = ""
					comp.bottom = ""
					comp.shadow = false
					comp.show_once = true
					comp.show_layer_admin = true // 临时字段,控制显示隐藏,保存时需删除
				}
				this.res.comps.push(comp)
				this.comp = comp
				this.tabIndex = 1
			},
			// 切换当前组件
			changeComp(layer){
				layer.show_layer_admin = true
				this.comp = layer
				this.tabIndex = 1
			},
			// 组件的编辑
			editComp(arg){
				switch (arg.type){
					case 'del':
						this.res.comps.splice(this.compIndex, 1)
						setTimeout(()=>{
							this.comp = {}
						},300)
						break;
					case 'up':
						this.swapItems(this.res.comps, this.compIndex, this.compIndex-1)
						break;
					case 'down':
						this.swapItems(this.res.comps, this.compIndex, this.compIndex+1)
						break;
				}
			},
			// 轮播图的编辑
			editSwiper(type, val, list){
				let index = list.findIndex(v => v._id == val._id)
				switch (type){
					case 'add':
						list.push({_id: Date.now(), src:"", url:""})
						break;
					case 'del':
						if(list.length>1) list.splice(index, 1)
						break;
					case 'up':
						this.swapItems(list, index, index-1)
						break;
					case 'down':
						this.swapItems(list, index, index+1)
						break;
				}
			},
			// 元素的上下移动
			swapItems(arr, index1, index2){
				if(arr.length <= 1) return arr // 长度不够不处理
				if (index1 > index2) {
					if(index1 == 0) return arr // 上移不处理
				} else if(index1 < index2){
					if(index1 == arr.length - 1) return arr // 下移不处理
				}
				arr[index1] = arr.splice(index2,1,arr[index1])[0] // 上下移动
			　　return arr
			},
			// http地址需去掉最后的/,否则回显的时候返回{},属于uniCloud的bug,待官方修复
			formatUrl(val){
				if(val.indexOf('http')==0 && val.substr(val.length-1,1)=='/'){
					return val.substr(0,val.length-1)
				}else{
					return val
				}
			},
			// 添加热区
			addArea(comp, close){
				const w = 40 // 默认宽度
				const offset = Math.floor(Math.random() * w) // 获取1-w之间的随机数
				if(!comp.areas) this.$set(comp, 'areas', [])
				comp.areas.push({_id: Date.now(),w: w,h: w,top: offset,left: offset, close})
			},
			// 获取链接输入框的备注
			getInputUrlLabel(a){
				return `热区${a+1}链接`
			},
			// 提交
			submit(){
				// 参数校验
				if(this.res.name&&!/^\w+$/.test(this.res.name)){
					showToast('页面别名由英文,数字,下划线组成')
					return;
				}
				if(!this.res.title){
					showToast('请输入页面别名')
					return;
				}
				// 删除临时字段
				for (let comp of this.res.comps) {
					if(comp.type == this.designType.layer){
						delete comp['show_layer_admin']
					}
				}
				// 请求接口
				let api = this.isEdit ? apiDesignEdit : apiDesignAdd
				api(this.res).then(()=>{
					showToast('保存成功', ()=>{
						uni.navigateBack()
					})
				})
			},
			// 删除
			del(){
				uni.showModal({
					content: "确定删除当前装修页面吗?",
					success: res=> {
						if(res.confirm){
							apiDesignDel(this.res._id).then(()=>{
								showToast('删除成功', ()=>{
									uni.navigateBack()
								})
							})
						}
					}
				})
			},
			// 返回
			doBack(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.page-design-edit{
		display: flex;
		
		view,text,image,input,textarea {
			box-sizing: border-box
		}
		::-webkit-scrollbar-track {
			background-color: transparent;
		}
		::-webkit-scrollbar {
			width: 6px;
		}
		::-webkit-scrollbar-thumb {
			border-radius: 6px;
			background-color: #ccc;
		}
		::-webkit-scrollbar-thumb:hover{
			background-color: #aaa;
		}
		
		::v-deep img {
			-webkit-user-drag: none !important;
		}
		
		.left-warp{
			width: 160px;
			padding-top: 30px;
			.btn-back{
				display: block;
				width: 30px;
				height: 30px;
				line-height: 30px;
				margin: auto;
				font-size: 20px;
				color: $uni-color-primary;
				&:hover{
					border-color: #ff4d4f;
					color: #ff4d4f;
				}
			}
			.comp{
				width: 60px;
				height: 60px;
				line-height: 60px;
				margin: 30px auto;
				text-align: center;
				border-radius: 50%;
				font-size: 14px;
				border: 1px solid $uni-color-primary;
				color: $uni-color-primary;
				cursor: pointer;
				&.active,
				&:hover{
					border-color: #ff4d4f;
					color: #ff4d4f;
				}
			}
			.comp-layers{
				margin-top: -20px;
				.comp-layer{
					padding: 5px 0;
					text-align: center;
					font-size: 12px;
					color: $uni-color-primary;
					&.active,
					&:hover{
						border-color: #ff4d4f;
						color: #ff4d4f;
					}
				}
			}
		}
		
		.center-warp{
			flex: 1;
			background-color: #fafafa;
			.phone{
				position: relative;
				width: 395px;
				border-radius: 30px;
				padding: 50px 10px 85px;
				border: 1px solid #666;
				margin: 20px auto 0;
				background-color: #fff;
				box-shadow: 0 0 6px rgba(0,21,41,.35);
				.phone-content{
					position: relative;
					width: 375px;
					overflow-y: auto;
					border: 1px solid #666;
					.phone-status{
						z-index: 99;
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 20px;
						pointer-events: none;
					}
				}
				.phone-top{
					position: absolute;
					top: 20px;
					left: 50%;
					width: 100px;
					height: 10px;
					border-radius: 10px;
					transform: translateX(-50%);
					border: 1px solid #666;
				}
				.phone-bottom{
					position: absolute;
					bottom: 18px;
					left: 50%;
					width: 50px;
					height: 50px;
					border-radius: 50%;
					border: 1px solid #666;
					transform: translateX(-50%);
				}
			}
		}
		.right-warp{
			display: flex;
			flex-direction: column;
			width: 500px;
			.tabs-warp{
				width: 300px;
				padding: 15px;
				margin: auto;
			}
			.set-warp{
				flex: 1;
				overflow-y: auto;
				padding: 10px 20px;
				font-size: 14px;
				.comp-empty{
					text-align: center;
					color: #999;
				}
				.item-warp{
					position: relative;
					margin-bottom: 20px;
					display: flex;
					align-items: center;
					.label{
						margin-right: 10px;
					}
					.item-flex{
						flex: 1;
					}
					.input{
						height: 50px;
						padding-left: 10px;
						border: 1px solid #eee;
					}
					.me-radio,
					/deep/.me-radio{
						margin-left: 40px;
					}
				}
				
				.add-area{
					margin-right: 20px;
					padding: 4px 0;
					color: $uni-color-primary;
				}
				
				.comp-swiper{
					.sw-item{
						border-bottom: 1px solid #eee;
						margin-bottom: 15px;
						.eidt-swiper{
							text-align: center;
							padding-bottom: 15px;
							.btn-icon{
								display: inline-block;
								width: 20px;
								height: 20px;
								line-height: 20px;
								margin: 0 5px;
								border-radius: 50%;
								font-size: 14px;
								border: 1px solid #999;
								color: #333;
							}
						}
					}
				}
			}
			.submit-warp{
				text-align: center;
				padding: 10px 0 15px;
				.btn{
					display: inline-block;
					width: 100px;
					margin: 0 10px;
				}
			}
		}
	}
	
	.min-page{
		.left-warp{
			width: 120px;
			.comp{
				width: 54px;
				height: 54px;
				line-height: 54px;
			}
		}
		.center-warp{
			.phone{
				padding: 10px;
				border-radius: 8px;
				.phone-content{
					width: 375px;
				}
				.phone-top{
					display: none;
				}
				.phone-bottom{
					display: none;
				}
			}
		}
	}
</style>
